<template>
	<view class="body">
		<view class="manager_information">
			<view class="header">
				<image :src="query.avatar" mode="aspectFill" class="uimg"></image>
				<view class="right_comlumn_box">
					<view class="name">
						<text>Hi，我是店长</text>
						<text>{{query.name}}</text>
					</view>
					<view class="content">
						{{query.marked}}
					</view>
					<view class="bottom">
						<view class="btn1" @click="openCall">
							<image :src="$IMG_URL('/static/shop/call.png')" mode="aspectFill" class="icon1"></image>
							<text>拨打电话</text>
						</view>

						<view class="btn2" @click="openWeChatCode">
							<image :src="$IMG_URL('/static/shop/wechat.png')" mode="aspectFill" class="icon2"></image>
							<text>联系店长</text>
						</view>
					</view>
				</view>
			</view>
			<view class="navigation-tabs" v-if="tabsList.length">
				<view 
					v-for="(item, index) in tabsList" 
					:key="index" 
					class="nav-tab-item" 
					:class="{ 'active': TabsCurrent === index }"
					@click="changeTabs(index)">
					<text class="nav-tab-text">{{ item.title }}</text>
					<view class="nav-indicator" v-if="TabsCurrent === index"></view>
				</view>
			</view>
			<view class="nav-spacer" v-else></view>
		</view>
		<!-- 富文本 -->
		<view class="rich-text-container" v-if="tabsList[TabsCurrent] && tabsList[TabsCurrent].content">
			<view class="rich-text">
				<u-parse :html="processedContent"></u-parse>
			</view>
		</view>
		<empty v-else :content="'通道'"></empty>
		<!-- 弹窗 -->
		<telephone :telephoneShow="telephoneShow" :telephone="query.mobile" @cancel="callCancel" @sure="callSure">
		</telephone>
		<WechatCode :WechatCodeShow="WechatCodeShow" @save="saveImg" :code="query.wechat_mark" @sure="weChatSure" @preview="preview" :title="'添加店长微信'" :content="'长按识别二维码'" :btn="'保存至相册'"></WechatCode>
	</view>
</template>

<script>
	import telephone from './components/telephone.vue'
	import WechatCode from './components/WechatCode.vue'
	import empty from '@/components/empty.vue'
	import {
		guide
	} from '@/api/shop.js'
	export default {
		components: {
			telephone,
			WechatCode,
			empty
		},
		data() {
			return {
				// 微信二维码痰喘
				WechatCodeShow: false,
				wechatCode: '',
				// 电话弹窗
				telephoneShow: false,
				telephoneNumber: '',
				query: {},
				// tabs标签
				tabsList: [],
				TabsCurrent: 0,
				content:'',
				from:{},
				// 富文本内容缓存
				processedContentCache: null
			}
		},
		computed: {
			// 处理富文本内容，优化显示效果
			processedContent() {
				if (!this.tabsList[this.TabsCurrent] || !this.tabsList[this.TabsCurrent].content) {
					return '';
				}
				
				const content = this.tabsList[this.TabsCurrent].content;
				
				// 如果内容没有变化，直接返回缓存
				if (this.processedContentCache && this.processedContentCache.original === content) {
					return this.processedContentCache.processed;
				}
				
				// 处理HTML内容
				let processed = content;
				
				// 为图片添加统一样式，确保不超出容器宽度
				processed = processed.replace(/<img/g, '<img style="max-width: 100%; width: auto; height: auto; border-radius: 12rpx; margin: 20rpx 0; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1); display: block; box-sizing: border-box;"');
				
				// 为段落添加样式，确保文字换行
				processed = processed.replace(/<p/g, '<p style="line-height: 1.8; margin: 16rpx 0; color: #333; font-size: 28rpx; word-wrap: break-word; word-break: break-all; max-width: 100%; box-sizing: border-box;"');
				
				// 为其他块级元素添加基础样式
				processed = processed.replace(/<div/g, '<div style="max-width: 100%; box-sizing: border-box; word-wrap: break-word;"');
				
				// 为标题添加样式
				processed = processed.replace(/<h([1-6])/g, '<h$1 style="color: #73F0EA; margin: 30rpx 0 20rpx; font-weight: 600; word-wrap: break-word; word-break: break-all; max-width: 100%; box-sizing: border-box;"');
				
				// 为强调文本添加样式
				processed = processed.replace(/<strong/g, '<strong style="color: #73F0EA; font-weight: 600; word-wrap: break-word; word-break: break-all;"');
				
				// 缓存处理结果
				this.processedContentCache = {
					original: content,
					processed: processed
				};
				
				return processed;
			}
		},
		onLoad(e) {
			console.log('e', e);
			this.from = e
			this.getGuide(e)
		},
		methods: {
			getGuide(e){
				guide(e).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.query = res.data.buinour_info
						this.tabsList = res.data.guide_list
						this.$u.mpShare = {
							title: '到店指引',
							path: '/pageA/shop/Arrival-guide?shop_id=' + this.from.shop_id,
							imageUrl: '', 
						}
					}
				})
			},
			// 微信弹窗
			openWeChatCode() {
				this.WechatCodeShow = true
			},
			preview(){
				console.log('111');
			},
			saveImg(){
				this.$SAVERIMG(this.query.wechat_mark)
				this.WechatCodeShow = false
			},
			weChatSure() {
				this.WechatCodeShow = false
			},
			// 电话弹窗
			openCall() {
				this.telephoneShow = true
			},
			callSure() {
				this.telephoneShow = false
			},
			callCancel() {
				this.telephoneShow = false
			},
				changeTabs(index) {
					this.TabsCurrent = index;
					// 清除缓存，确保内容更新
					this.processedContentCache = null;
				}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.body {
		display: flex;
		flex-direction: column;
		
		// 富文本容器样式
		.rich-text-container {
			padding: 24rpx;
			background: #ffffff;
			margin-top: 24rpx;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
			
			.rich-text {
				line-height: 1.8;
				font-size: 28rpx;
				color: #333;
				word-wrap: break-word;
				word-break: break-all;
				max-width: 100%;
				box-sizing: border-box;
				
				// 富文本内部元素样式优化
				::v-deep {
					img {
						max-width: 100% !important;
						width: auto !important;
						height: auto !important;
						border-radius: 12rpx !important;
						margin: 20rpx 0 !important;
						box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1) !important;
						display: block !important;
						box-sizing: border-box !important;
					}
					
					p {
						line-height: 1.8 !important;
						margin: 16rpx 0 !important;
						color: #333 !important;
						font-size: 28rpx !important;
						text-align: justify !important;
						word-wrap: break-word !important;
						word-break: break-all !important;
						max-width: 100% !important;
						box-sizing: border-box !important;
					}
					
					h1, h2, h3, h4, h5, h6 {
						color: #73F0EA !important;
						margin: 30rpx 0 20rpx !important;
						font-weight: 600 !important;
						word-wrap: break-word !important;
						word-break: break-all !important;
						max-width: 100% !important;
						box-sizing: border-box !important;
					}
					
					strong {
						color: #73F0EA !important;
						font-weight: 600 !important;
						word-wrap: break-word !important;
						word-break: break-all !important;
					}
					
					// 通用文本控制
					* {
						max-width: 100% !important;
						box-sizing: border-box !important;
						word-wrap: break-word !important;
					}
					
					// 表格样式优化
					table {
						width: 100% !important;
						max-width: 100% !important;
						table-layout: fixed !important;
						word-wrap: break-word !important;
						border-collapse: collapse !important;
						margin: 20rpx 0 !important;
					}
					
					td, th {
						padding: 12rpx !important;
						border: 1rpx solid #e0e0e0 !important;
						word-wrap: break-word !important;
						font-size: 26rpx !important;
					}
					
					// 预格式化文本控制
					pre {
						white-space: pre-wrap !important;
						word-wrap: break-word !important;
						overflow-x: auto !important;
						max-width: 100% !important;
						background: #f5f5f5 !important;
						padding: 16rpx !important;
						border-radius: 8rpx !important;
						font-size: 24rpx !important;
						margin: 16rpx 0 !important;
					}
					
					// 列表样式
					ul, ol {
						padding-left: 40rpx !important;
						margin: 16rpx 0 !important;
					}
					
					li {
						margin: 8rpx 0 !important;
						line-height: 1.6 !important;
					}
					
					// 引用样式
					blockquote {
						border-left: 4rpx solid #73F0EA !important;
						padding-left: 20rpx !important;
						margin: 20rpx 0 !important;
						color: #666 !important;
						background: #f9f9f9 !important;
						padding: 20rpx !important;
						border-radius: 8rpx !important;
					}
				}
			}
		}

		.manager_information {
			width: 100%;
			// height: 276rpx;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			padding: 0 24rpx;

			.header {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding-top: 24rpx;
				flex: 1;

				.uimg {
					width: 160rpx;
					height: 160rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 16rpx;
					margin-right: 16rpx;
				}

				.right_comlumn_box {
					display: flex;
					flex-direction: column;
					flex: 1;
					// justify-content: space-around;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #333333;
						margin-bottom: 6rpx;
					}

					.content {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #666666;
						margin-bottom: 12rpx;
					}

					.bottom {
						display: flex;
						flex-direction: row;
						justify-content: space-around;

						.btn1 {
							transform: rotateZ(360deg);
							width: 258rpx;
							height: 64rpx;
							border: 1rpx solid #73F0EA;
							border-radius: 16rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							color: #73F0EA;

							.icon1 {
								width: 30rpx;
								height: 30rpx;
								margin-right: 15rpx;
							}
						}

						.btn2 {
							width: 258rpx;
							height: 64rpx;
							background: #73F0EA;
							border-radius: 16rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							color: #ffffff;

							.icon2 {
								width: 32rpx;
								height: 26rpx;
								margin-right: 15rpx;
							}
						}
					}
				}
			}
			.tabs{
				// 已移除，使用新的 navigation-tabs 样式
			}
		}
	}
	// 优化后的导航栏样式
	.navigation-tabs {
		margin: 24rpx 0;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 60rpx;
		
		.nav-tab-item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;
			transition: all 0.2s ease;
			
			.nav-tab-text {
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
				letter-spacing: 1rpx;
				padding: 12rpx 0;
				transition: color 0.2s ease;
			}
			
			.nav-indicator {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 6rpx;
				background: #73F0EA;
				border-radius: 3rpx;
			}
			
			&.active {
				.nav-tab-text {
					color: #73F0EA;
					font-weight: 600;
				}
			}
			
			// 点击反馈效果
			&:active {
				transform: scale(0.98);
			}
		}
	}
	
	// 占位空间
	.nav-spacer {
		height: 20rpx;
	}
</style>